<template>
  <el-form :model="form" label-width="auto" ref="formRef" style="max-width: 100%">
    <el-row :gutter="80">
      <el-col :span="8" v-for="item in _list" :key="item">
        <el-form-item :label="item?.label" :label-width="item?.labelWidth ? item?.labelWidth : 85" :prop="item.model">
          <!-- 输入框 -->
          <el-input
            v-if="item?.type === 'input'"
            v-model="form[item.model]"
            :placeholder="item['placeholder'] ? item['placeholder'] : '请输入'"
          />
          <!-- 下拉选择框 -->
          <el-select
            v-else-if="item?.type === 'select'"
            clearable
            v-model="form[item.model]"
            :placeholder="item['placeholder'] ? item['placeholder'] : '请输入'"
            style="width: 100%"
          >
            <el-option
              v-for="_item in item?.data"
              :key="_item.value"
              :label="_item.label"
              :value="_item.value"
              :disabled="_item.disabled"
            />
          </el-select>
          <!-- 树型下拉 -->
          <el-tree-select
            v-else-if="item?.type === 'select-tree'"
            clearable
            v-model="form[item.model]"
            :node-key="item.nodeKey"
            check-strictly
            default-expand-all
            :data="item.data"
            :render-after-expand="false"
            :props="{
              label: 'name'
            }"
            style="width: 100%"
          />
          <!-- @node-click="handleNodeClick" -->
          <!-- 日期范围选择 -->
          <el-date-picker
            v-else-if="item?.type === 'daterange'"
            clearable
            v-model="form[item.model]"
            type="daterange"
            range-separator=" - "
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
            :placeholder="item['placeholder'] ? item['placeholder'] : '请选择'"
          />
          <!-- 单个日期选择 -->
          <el-date-picker
            v-else-if="item?.type === 'date'"
            clearable
            v-model="form[item.model]"
            type="date"
            :placeholder="item['placeholder'] ? item['placeholder'] : '请选择'"
            style="width: 100%"
          />
          <!-- 价格范围选择 -->
          <div v-else-if="item?.type === 'numrange'" class="numrange">
            <el-input :min="0" type="number" v-model="form[item.model.split('-')[0]]" />
            <span> - </span>
            <el-input :min="0" type="number" v-model="form[item.model.split('-')[1]]" />
          </div>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <div class="btn-wrap">
    <el-button type="primary" :icon="Search" @click="submit">查询</el-button>
    <el-button type="primary" plain :icon="RefreshRight" @click="reset">重置</el-button>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { Search, RefreshRight } from "@element-plus/icons-vue";

const _list = ref([]);
const form = ref({});
const formRef = ref();

const props = defineProps({
  list: {
    type: Array,
    default: () => []
  }
});
const emit = defineEmits(["submit", "reset"]);

//数据字典查询
const getDataDic = key => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve([
        { label: "aaaa", value: 1 },
        { label: "bbbbbbb", value: 0 }
      ]);
    }, 2000);
  });
};
watch(
  () => props.list,
  async val => {
    _list.value = JSON.parse(JSON.stringify(props.list));
    for (let item of _list.value) {
      if (item.key) {
        const data = await getDataDic(item.key);
        item.data = data;
      } else if (item.treeType === "productType") {
        // const data = await getDataDic(item.key);
        //异步请求 商品分类数据
        console.log(123123, item.treeType);

        item.data = [
          {
            categoryId: "1780859823072493568",
            image: "http://dummyimage.com/400x400",
            name: "成品",
            parentId: 0,
            parentName: null,
            fomart: "1780859823072493568",
            remark: "这是简单的备注信息",
            productNum: 0,
            status: 0,
            sortOrder: 0,
            createTime: "2024-04-18 15:24:03",
            preview: "成品",
            children: [
              {
                categoryId: "1780860313751535616",
                image: "http://dummyimage.com/400x400",
                name: "客厅家具",
                parentId: "1780859823072493568",
                parentName: "成品",
                fomart: "1780859823072493568-1780860313751535616",
                remark: "这是简单的ss",
                productNum: 0,
                status: 1,
                sortOrder: 4,
                createTime: "2024-04-18 15:26:00",
                preview: "成品-客厅家具",
                children: [
                  {
                    categoryId: "1782608490525163520",
                    image: null,
                    name: "茶几",
                    parentId: "1780860313751535616",
                    parentName: "客厅家具",
                    fomart: "1780859823072493568-1780860313751535616-1782608490525163520",
                    remark: null,
                    productNum: 0,
                    status: 1,
                    sortOrder: 0,
                    createTime: "2024-04-23 11:12:38",
                    preview: "成品-客厅家具-茶几",
                    children: []
                  },
                  {
                    categoryId: "1780860828338110464",
                    image: "http://dummyimage.com/400x400",
                    name: "沙发",
                    parentId: "1780860313751535616",
                    parentName: "客厅家具",
                    fomart: "1780859823072493568-1780860313751535616-1780860828338110464",
                    remark: null,
                    productNum: 0,
                    status: 1,
                    sortOrder: 1,
                    createTime: "2024-04-18 15:28:03",
                    preview: "成品-客厅家具-沙发",
                    children: []
                  },
                  {
                    categoryId: "1780860828338110465",
                    image: "http://dummyimage.com/400x400",
                    name: "椅子",
                    parentId: "1780860313751535616",
                    parentName: "客厅家具",
                    fomart: "1780859823072493568-1780860313751535616-1780860828338110465",
                    remark: null,
                    productNum: 0,
                    status: 1,
                    sortOrder: 2,
                    createTime: "2024-04-18 15:28:03",
                    preview: "成品-客厅家具-椅子",
                    children: []
                  }
                ]
              },
              {
                categoryId: "1782607272084045824",
                image: null,
                name: "卧室家具A",
                parentId: "1780859823072493568",
                parentName: "成品",
                fomart: "1780859823072493568-1782607272084045824",
                remark: null,
                productNum: 0,
                status: 1,
                sortOrder: 4,
                createTime: "2024-04-23 11:07:48",
                preview: "成品-卧室家具A",
                children: [
                  {
                    categoryId: "1782608435705610240",
                    image: null,
                    name: "小夜灯",
                    parentId: "1782607272084045824",
                    parentName: "卧室家具A",
                    fomart: "1780859823072493568-1782607272084045824-1782608435705610240",
                    remark: null,
                    productNum: 0,
                    status: 1,
                    sortOrder: 1,
                    createTime: "2024-04-23 11:12:25",
                    preview: "成品-卧室家具A-小夜灯",
                    children: []
                  },
                  {
                    categoryId: "1782607736800346112",
                    image: null,
                    name: "床头柜11111",
                    parentId: "1782607272084045824",
                    parentName: "卧室家具A",
                    fomart: "1780859823072493568-1782607272084045824-1782607736800346112",
                    remark: null,
                    productNum: 0,
                    status: 1,
                    sortOrder: 2,
                    createTime: "2024-04-23 11:09:38",
                    preview: "成品-卧室家具A-床头柜11111",
                    children: []
                  }
                ]
              }
            ]
          },
          {
            categoryId: "1780859866953302016",
            image: "http://dummyimage.com/400x400",
            name: "灯饰",
            parentId: 0,
            parentName: null,
            fomart: "1780859866953302016",
            remark: "这是简单的备注信息",
            productNum: 0,
            status: 1,
            sortOrder: 1,
            createTime: "2024-04-18 15:24:14",
            preview: "灯饰",
            children: [
              {
                categoryId: "1782608575103303680",
                image: null,
                name: "厨房灯饰",
                parentId: "1780859866953302016",
                parentName: "灯饰",
                fomart: "1780859866953302016-1782608575103303680",
                remark: null,
                productNum: 0,
                status: 1,
                sortOrder: 0,
                createTime: "2024-04-23 11:12:58",
                preview: "灯饰-厨房灯饰",
                children: []
              }
            ]
          },
          {
            categoryId: "1780868886627893248",
            image: "http://dummyimage.com/400x400",
            name: "墙布",
            parentId: 0,
            parentName: null,
            fomart: "1780868886627893248",
            remark: "这是简单的备注信息",
            productNum: 0,
            status: 1,
            sortOrder: 3,
            createTime: "2024-04-18 16:00:04",
            preview: "墙布",
            children: []
          }
        ];
      }
    }
  },
  { deep: true, immediate: true }
);

const submit = () => {
  emit("submit", form.value);
};

const reset = () => {
  formRef.value.resetFields();
  for (let item of props.list) {
    if (item.type === "numrange") {
      console.log(99999);
      form.value[[item.model.split("-")[0]]] = undefined;
      form.value[[item.model.split("-")[1]]] = undefined;
    }
  }
  emit("reset");
};
</script>

<style scoped lang="scss">
.numrange {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .el-input-number {
    flex: 1;
  }
  span {
    width: 30px;
    text-align: center;
  }
}
.btn-wrap {
  display: flex;
  justify-content: flex-end;
}
</style>
